<template>
  <div class="liebiao">
     <div class="kapian" v-for="item in list" :key="item.id" >
       <div class="tupian" @click = "gotodetail(item.tradeItemId,item.type)"><img :src="item.imga" alt=""></div>
       <div class="biaoti"><h2>{{ item.title }}</h2></div>
       <div class="jifeng">{{ item.cfav }}积分</div>
       <div class="duihuang" @click="removeid(item.id)">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shoucang"></use>
          </svg>
       </div>
     </div>
  </div>
</template>

<script>
import { mapState,mapMutations,mapActions} from 'vuex';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'shopping',
  components: { },
  data () {
    return {
      list:[]
    }
  },
  created() {
    this.asynczx();      
    this.list = JSON.parse(localStorage.getItem("sclist"));
    this.changegsc(this.list.length);      
    console.log(this.list);
  },
  computed: {
    ...mapState({
      firstzx:state => state.gsc.firstzx,
      // gwcvalue:state => state.gwc.gwcvalue,
      // gscvalue:state => state.gsc.gscvalue,
      // isLogined:state=>state.loginzt.isLogined,
      // userInfo:state=>state.userinfo.userInfo, 
    }),
  },
  methods: {
    ...mapMutations({
    //  changeisshowlogin:"login/changeisshowlogin",
    //  // 登录状态
    //  changeIsLogined:"loginzt/changeIsLogined",
        removeitem:"gsc/removeitem",
        changegsc:"gsc/changegsc",
        notfirstzx:"gsc/notfirstzx"
  }),
  ...mapActions({
      // // 登录提示语是否显示
      // asyncChangeIsShowToast:"logintoast/asyncChangeIsShowToast",
      // 请求购物车的接口
      asynccollect:"gsc/collect",
      
    }),
    // 仅执行一次接口数据
    asynczx(){
      if(this.firstzx){
        this.asynccollect();
        this.list = JSON.parse(localStorage.getItem("sclist"));
        this.changegsc(this.list.length); 
        this.notfirstzx();
      }else{
        this.notfirstzx();
      }
    },
    removeid( id ){
      this.removeitem( id );
      // 更新本地数组
      this.list = JSON.parse(localStorage.getItem("sclist"));
      this.changegsc(this.list.length);
    },
    // 跳转到详情页
    gotodetail(itemid,type){
      const id  = itemid;
      const index = type;
      this.$router.push('/detail/' + index + '/' + id + '/')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang = "less" scoped>
.liebiao{
 margin:0 auto;
 margin-top: 110px;
 width: 860px;
 .kapian{
    text-align:left;
    cursor: pointer;
    width: 800px;
    height: 150px;
    background-color: rgb(245, 245, 245);
    margin-top: 20px;
    position: relative;
    border-radius:15px;
    box-shadow: 0 0 10px #ccc;
    .tupian{
      width:100px;
      height: 100px;
      margin: 25px;
      background-color: aliceblue;
      float:left;
      img{
        width:100px;
        height: 100px;
      }
    }
    .biaoti{
      width:455px;
      height: 60px;
      margin-top: 25px;
      // background-color: yellow;
      position: absolute;
      left:150px;
    }
    .jifeng{
      position: absolute;
      left:150px;
      bottom: 25px;
      font-size: 18px;
    }
    .duihuang{
      padding: 10px;
      float:right;
      margin-right: 25px;
      margin-top: 50px;
      .icon{
            height:30px;
            width: 30px;
            fill:red;    
          }
    }
 }
}
</style>
